<template>
  <div>
    <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="backTo">返回</span>
        </div>

        <h2 class="header-m" >地图详情</h2>
        <div></div>
      </div>
    </div>
    <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
    <div class="notice">
     
    <ul class="noticeList">
      <li class="notice-item"  v-for="item in tipList" :key="item.id" @click="goHome(item)">
       <span class="txt-t">{{ item.name }}</span> 
        <van-icon class="txt-r" name="arrow" />
      </li>
    </ul>
    </div>
    
    <div class="bottom">
        <p>当前位置</p>
    <div id="container"></div>

    </div>
    
  </div>
</template>


<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      value: "",
      tipList: "",
      city: "",
    };
  },
  watch: {
    value() {
      var that = this;
      AMap.plugin("AMap.AutoComplete", function () {
        var autoOptions = {
          //city 限定城市，默认全国
          city: "that.city",
        };
        // 实例化AutoComplete
        var autoComplete = new AMap.AutoComplete(autoOptions);
        // 根据关键字进行搜索
        autoComplete.search(that.value, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          that.tipList = result.tips;
        });
      });
    },
  },

  computed: {
    ...mapState(["cityDetail"]),
  },

  mounted() {
    var that = this;
    if (that.cityDetail.name) {
      var map = new AMap.Map("container", {
        zoom: 18, //级别
        center: [that.cityDetail.location.lng, that.cityDetail.location.lat], //中心点坐标
      });
      var marker = new AMap.Marker({
        position: [that.cityDetail.location.lng, that.cityDetail.location.lat], //位置
      });
      marker.setLabel({
        direction:'right',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: that.cityDetail.name, //设置文本标注内容
    });
      map.add(marker); //添加到地图
    } else {
      var map = new AMap.Map("container", {
        zoom: 7, //级别
      });
      
    }
  },
  methods: {
    ...mapMutations(["reCity"]),
    backTo() {
      this.$router.back();
    },
    goHome(val) {
      this.reCity(val);
      this.$router.push("/home");
    },
  },
};
</script>

<style>
</style>



<style lang="scss" scoped>
@import "./scss/index.scss";
</style>